<template>
  <div class="translation">
    <div class="container">
      <div class="translation-content">
        <!-- 侧边栏 -->
        <div class="sidebar">
          <div class="category-list">
            <h3>翻译分类</h3>
            <ul>
              <li :class="{ active: selectedCategory === 1 }" @click="setUID(1, -1)">
                全部
              </li>
              <li :class="{ active: selectedCategory === 2 }" @click="setUID(2, 0)">
                我翻译的
              </li>
              <li v-for="category in categories" :key="category.id"
               :class="{ active: selectedCategory === category.id }" @click="setUID(category.id, category.uid)">
               <span>{{ category.name }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 主内容区 -->
        <div class="main-content">

          <!-- 分页控件（上方） -->
          <div class="pagination-top">
            <!-- 搜索和排序控件 -->
            <div class="search-box">
              <input type="text" v-model="searchQuery" placeholder="搜索原文、译文、备注" />
              <button @click="doSearch">查找</button>
              <button @click="clearSearch">清空</button>
            </div>
            <div class="pagination-info">
              显示第 {{ (pagination.page - 1) * pagination.per_page + 1 }} 到 {{
                pagination.page * pagination.per_page
              }}
              条，共 {{ pagination.total }} 条记录
            </div>
            <div class="pagination-controls">
              <button @click="prevPage" :disabled="!pagination.has_prev">
                上一页
              </button>
              第<input type="number" v-model="pagination.page" min="1" :max="pagination.pages"
                @change="fetchTranslations" style="width:80px;height:30px;" />页
              <button @click="nextPage" :disabled="!pagination.has_next">
                下一页
              </button>
            </div>
          </div>
          <!-- 翻译状态筛选 -->
          <div class="filter-translated">
            <label>
              <input type="radio" value="N/A" v-model="filter_translated" @change="fetchTranslations">
              全部
            </label>
            <label>
              <input type="radio" value="true" v-model="filter_translated" @change="fetchTranslations">
              已翻译
            </label>
            <label>
              <input type="radio" value="false" v-model="filter_translated" @change="fetchTranslations">
              未翻译
            </label>
            <input type="text" v-model="file_id" placeholder="限定file_id" />&nbsp;&nbsp;
            <input type="text" v-model="gossip_id" placeholder="限定gossip_id" />
            <span style="float:right;">当前用户ID:{{ getCurrentUserInfo().user_id }}</span>
          </div>

          <!-- 翻译内容表格 -->
          <div class="translation-table">
            <table>
              <thead>
                <tr>
                  <th id="file_id" @click="sortBy('file_id')" class="sortable">
                    file_id
                    <span class="sort-indicator">
                      <span :class="{ active: sortField === 'id' && sortOrder === 'asc' }">▲</span>
                      <span :class="{ active: sortField === 'id' && sortOrder === 'desc' }">▼</span>
                    </span>
                  </th>
                  <th id="gossip_id" @click="sortBy('gossip_id')" class="sortable">
                    gossip_id
                    <span class="sort-indicator">
                      <span :class="{ active: sortField === 'name' && sortOrder === 'asc' }">▲</span>
                      <span :class="{ active: sortField === 'name' && sortOrder === 'desc' }">▼</span>
                    </span>
                  </th>
                  <th id="content" @click="sortBy('content')" class="sortable">
                    原文
                    <span class="sort-indicator">
                      <span :class="{ active: sortField === 'english' && sortOrder === 'asc' }">▲</span>
                      <span :class="{ active: sortField === 'english' && sortOrder === 'desc' }">▼</span>
                    </span>
                  </th>
                  <th id="history" v-if="allowEdit()" @click="sortBy('history')" class="sortable">历史</th>
                  <th id="chinese" @click="sortBy('chinese')" class="sortable">译文</th>
                  <th id="remark" @click="sortBy('remark')" class="sortable">备注</th>
                  <th id="last_update" v-if="!allowEdit()">最后更新时间</th>
                  <th id="action">操作</th>
                </tr>
              </thead>
              <tbody v-if="allowEdit()"><!--全部、我的可以编辑-->
                <tr v-for="item in items" :key="item.file_id">
                  
                  <td>{{ item.file_id }}</td>
                  <td>{{ item.gossip_id }}</td>
                  <td>{{ item.content }}</td>
                  <td v-if="allowEdit()">
                    
                    <span class="translation-count" @mouseenter="showTranslationList(item.translations, $event, item)"
                      :class="{ 'has-translations': item.translations && item.translations.length > 0 }">
                      {{ item.translations ? item.translations.length : 0 }} 次
                    </span>
                  </td>
                  <td>
                    <button @click="ask_ai(item)">AI翻译</button>
                    <textarea v-model="item.chinese" @input="adjustTextareaHeight" class="translation-textarea"
                      placeholder="请输入译文..." id="translate-{{ item.file_id }}-{{ item.gossip_id }}"></textarea>

                      <span v-if="item.mention" style="color:yellow">{{ item.mention }}</span>
                  </td>
                  <td>
                    <textarea v-model="item.remark" class="translation-textarea" rows="3"></textarea>
                  </td>
                  <td>
                    <button @click="saveTranslation(item)" class="save-btn"
                      :disabled="checkValueNoChange(item)">保存
                    </button>
                  </td>
                </tr>
              </tbody>
              <tbody v-if="!allowEdit() && getCurrentUserInfo().user_id == audit_id"><!--专属账号内容审核-->
                <tr v-for="item in items" :key="item.file_id">                  
                  <td>{{ item.file_id }}</td>
                  <td>{{ item.gossip_id }}</td>
                  <td>
                    {{ item.content }}
                  </td>
                  <td>
                    <span v-if="item.audited_content" style="color:yellow">{{ item.audited_content }}</span>
                    <span v-else><textarea v-model="item.chinese" @input="adjustTextareaHeight" class="translation-textarea"
                      placeholder="请输入译文..."></textarea></span>
                  </td>
                  <td>
                    {{ item.remark }}
                  </td>
                  <td>{{ item.updated_at }}</td>
                  <td>
                    <button v-if="!item.audited" @click="saveTranslation(item)" class="save-btn"
                      >审核通过
                    </button>                    
                  </td>
                </tr>
              </tbody>
              <tbody v-if="!allowEdit() && getCurrentUserInfo().user_id != audit_id"><!--专属账号内容只读-->
                <tr v-for="item in items" :key="item.file_id">                  
                  <td>{{ item.file_id }}</td>
                  <td>{{ item.gossip_id }}</td>
                  <td>
                    {{ item.content }}
                  </td>
                  <td>
                    {{ item.chinese }}
                  </td>
                  <td>
                    {{ item.remark }}
                  </td>
                  <td>{{ item.updated_at }}</td>
                  <td>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知提示组件 -->
    <div class="notification-container">
      <div v-for="notification in notifications" :key="notification.id" :class="['notification', notification.type]"
        @click="removeNotification(notification.id)">
        <div class="notification-content">
          <strong>{{ notification.title }}</strong>
          <p>{{ notification.message }}</p>
        </div>
        <div class="notification-progress" :style="{ width: notification.progress + '%' }"></div>
      </div>
    </div>
  </div>
  <!-- 翻译列表弹窗 -->
  <div v-if="showTranslationModal" class="tooltip-modal"
    :style="{ top: tooltipPosition.top + 'px', left: tooltipPosition.left + 'px' }">
    <div class="tooltip-header">
      <h4>{{ modalTitle }}<button @click="closeTranslationModal" class="close-btn">关闭</button></h4>
    </div>
    <div class="tooltip-body">
      <div v-for="(translation, index) in currentTranslations" :key="index" class="translation-item">
        <div class="translation-header">
          <span class="translator">翻译者: {{ translation.commit_user_name || '未知' }}</span>
          <span class="translator">时间: {{ formatDateTime(translation.updated_at) }}</span>
          <span class="translator" v-if="allowCopy"><button @click="copyTranslation(translation)">复制</button></span>
        </div>
        <div class="translation-content">
          {{ translation.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import translation from '@/assets/scripts/translation.js';
export default translation;
</script>

<style scoped src="@/assets/style/translation.css" />